<script>
import useLoginForm from "@/hooks/login-form";
import {useRoute} from "vue-router";
import {useStore} from "vuex";
import {error} from "@/utils/error";

export default {
  setup(){
    const route = useRoute();
    const store = useStore();

    if(route.query.message){
      store.dispatch('setMessage', {
          value: error(route.query.message),
          type: 'warning',
      }, {root: true})
    }
    return{ ...useLoginForm()}
  }
}

</script>

<template>
  <form class="card" @submit.prevent>
    <h1>Войти в систему</h1>

    <div :class="['form-control', {invalid: eError}]">
      <label for="email">Email</label>
      <input type="email" id="email" v-model="email" @blur="eBlur">
      <small v-if="eError">{{ eError }}</small>
    </div>

    <div :class="['form-control', {invalid: pError}]">
      <label for="password">Пароль</label>
      <input type="password" id="password" v-model="password" @blur="pBlur">
      <small v-if="pError">{{ pError }}</small>
    </div>

    <button class="btn primary" type="submit" :disabled="isSubmitting || isTooManyAttempts" @click="onSubmit">Войти</button>
    <div class="text-danger" v-if="isTooManyAttempts">
      Вы слишком часто пытаетесь войти в систему. Попробуйте позже
    </div>
  </form>
</template>

<style>

</style>
